<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业</title>
    <style>
        .center-container {
            text-align: center; /* 水平居中 */
            display: flex;
            justify-content: center; /* 垂直居中 */
            align-items: center;
            height: 3vh; /* 使容器高度占满视口高度 */
        }
        .checkbox-label {
            color: #b6b6b6;
        }
        div{
            text-align:center;
        }
        .s1{
            width:  20px;
            height: 20;
            font-size: 120px;
            margin:auto;
            display:inline;
            color: #6782f8;
        }
        .s2{
            width:  20px;
            height: 20;
            font-size: 120px;
            margin:auto;
            display:inline;
            color: #fc0000;
        }
        .s3{
            width:  20px;
            height: 20;
            font-size: 120px;
            margin:auto;
            display:inline;
            color: #da4500;
        }
        .s4{
            width:  20px;
            height: 20;
            font-size: 120px;
            margin:auto;
            display:inline;
            color: #6782f8;
        }
        .s5{
            width:  20px;
            height: 20;
            font-size: 120px;
            margin:auto;
            display:inline;
            color: #00ff55;
        }
        .s6{
            width:  20px;
            height: 20px;
            font-size: 120px;
            margin:auto;
            display:inline;
            color: #ff0000;
        }
        .ball{
            /* 居中显示 */
            width: 200px;
            height: 200px;
            margin: auto;
            background-color: rgb(255, 255, 255);
            /* transition：标签元素属性  操作时间  变化速度   延迟时间 */
            transition: all 1s linear 0s;
        }
        
        .ball:hover{
            border-radius: 50%;
            /* box-shadow: [inset表示是内嵌，不写直接添加在外部]  x轴偏移量  y轴偏移量 模糊半径 阴影面拓展 颜色 */
            box-shadow:inset 15px 10px 25px 15px rgb(95, 86, 86);
        }
        .d{
            border-width: 10px 0px 0px 0px;
            border-color: yellow black;
        }
        #d1:hover{
            width: 100px;
            height: 50px;
            background-color: #4d4b4b;
        }
        #d3:hover{
            width: 100px;
            height: 50px;
            background-color: #4d4b4b;
        }
        #d2:hover{
            width: 100px;
            height: 50px;
            background-color: #4d4b4b;
        }
        #d4:hover{
            width: 100px;
            height: 50px;
            background-color: #4d4b4b;
        }
        #d5:hover{
            width: 100px;
            height: 50px;
            background-color: #4d4b4b;
        }
        #d6:hover{
            width: 100px;
            height: 50px;
            background-color: #4d4b4b;
        }

        li{
            list-style: none;
            float: left;
            margin-left: 20px;
            margin: auto;
        }

        a{
            text-decoration: none;
            color: black;
        };
        #c1,#c2,#c3{
            display: none;
        }
    </style>
</head>
<body>
    <table border="1px" cellpadding = "10px" cellspacing = "0" align = "center">
        <tr>
            <th colspan ="3">菜单价</th>
        </tr>
        <tr>
            <th rowspan="5">序号</th>
        </tr>
        <tr>
            <th>菜名</th>
            <th>菜价</th>
        </tr>
        <tr>
            <th>白菜</th>
            <th>3</th>
        </tr>
        <tr>
            <th>青菜</th>
            <th>3</th>
        </tr>
        <tr>
            <th>芹菜</th>
            <th>3</th>
        </tr>
    </table>
    <br\>
    <table border="1x" cellpadding = "10px" cellspacing = "0" align="center">
            <th rowspan = "4">课表</th> 
        </tr>
        <tr>
            <th colspan = "5">上课</th>
            <th colspan = "2">休息</th>
        </tr>
        <tr>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期日</th>
        </tr>
        <tr>
            <th>计算机</th>
            <th>计算机</th>
            <th>计算机</th>
            <th>计算机</th>
            <th>计算机</th>
            <th>复习</th>
            <th>休息</th>
        </tr>
    </table>
    <form action="#" method="post">
        <table border="0" cellspacing="0" cellpadding="10px" align="center">
            <tr>
                <td colspan="2" align="center"><h3>会员登入</h3></td>
            </tr>
            <tr>
                <td>登入账号</td>
                <td>
                    <input type = "text" class = "username" placeholder="邮箱/id/手机号" />
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>
                    <input type = "password" class = "password" placeholder="密码" />
                </td>
            </tr>
        </table>
        <div class="center-container">
            <input type="checkbox" id="option" name="option">
            <h5><label for="option" class="checkbox-label">两周内自动登入</label><h5>
        </div>
        <table border="0" cellspacing="0" cellpadding="1px" align="center">
            <tr>
                <td colspan="0" align="center">
                    <input type="submit" value="登录" style="background-color: rgb(94, 94, 255);color: white;align-self: center;" />&nbsp;&nbsp;&nbsp;&nbsp;
                </td>
                <td colspan="0" >
                    <a href="http://www.baidu.com" target="_self" >忘记密码</a>
                </td>
            </tr>
        </table>
        <table border="0" cellspacing="0" cellpadding="1px"  align="center">
            <tr>
                <td colspan="0" align="center">
                    <h4>其他账号登入 <img src="./img/ico1.png" alt="未加载正确资源" width="15px" height="15px" />QQ账号<img src="./img/ico2.png" alt="未加载正确资源" width="15px" height="15px" />新浪微博<img src="./img/ico3.png" alt="未加载正确资源" width="15px" height="15px" />百度账号<h4>
                </td>
            </tr>
        </table>
        <table border="0" cellspacing="0" cellpadding="1px"  align="center">
            <td colspan="0" >
                <a href="http://www.bilibili.com" target="_self" >还不是会员？立即注册</a>
            </td>
        </table>
    </form>
    <div class="s1">G</div>
    <div class="s2">o</div>
    <div class="s3">o</div>
    <div class="s4">g</div>
    <div class="s5">l</div>
    <div class="s6">e</div>
    <div class="ball"></div>
    <table align="center" cellspacing="0px" cellpadding="20px" border="0px">
        <tr>
            <td>
            <div class="d" id="d1">
                <a href="http://www.bilibili.com" target="_self" ><h4>首页</h4></a>
            </div>
            </td>
            <td>
            <div class="d" id="d2">
                <a href="http://www.bilibili.com" target="_self" ><h4>首页</h4></a>
            </div>
            </td>
            <td>
            <div class="d" id="d3">
                <a href="http://www.bilibili.com" target="_self" ><h4>首页</h4></a>
            </div>
            </td>
            <td>
            <div class="d" id="d4">
                <a href="http://www.bilibili.com" target="_self" ><h4>首页</h4></a>
            </div>
            </td>
            <td>
            <div class="d" id="d5">
                <a href="http://www.bilibili.com" target="_self" ><h4>首页</h4></a>
            </div>
            </td>
            <td>
            <div class="d" id="d6">
                <a href="http://www.bilibili.com" target="_self" ><h4>首页</h4></a>
            </div>
            </td>
        </tr>
    </table>
    <ul>
    <li>
        <a href="#">咖啡</a>
        <div class="c" id="c1">
            <a href="https://www.bilibili.com/" target="_blank">美式咖啡</a><br/>
            <a href="https://www.yuanshen.com/#/" target="_blank">雀巢咖啡</a><br/>
            <a href="https://www.douyin.com/"target = "_blank">拿铁咖啡</a>
        </div>
    </li>
    <li>
        <a href="#">果茶</a>
        <div class="c" id="c2">
            <a href="https://www.bilibili.com/" target="_blank">水鱼葡萄</a><br/>
            <a href="https://www.yuanshen.com/#/" target="_blank">甜甜苹果</a><br/>
            <a href="https://www.douyin.com/"target = "_blank">爱心菠萝</a>
        </div>
    </li>
    <li>
        <a href="#">奶茶</a>
        <div class="c" id="c3">
            <a href="https://www.bilibili.com/" target="_blank">三拼奶茶</a><br/>
            <a href="https://www.yuanshen.com/#/" target="_blank">原味奶茶</a><br/>
            <a href="https://www.douyin.com/"target = "_blank">中药奶茶</a>
        </div>
    </li>
    </ul>
</body>
</html>